import 'package:flutter/material.dart';
import 'package:flutter_trip/pages/home_page.dart';
import 'package:flutter_trip/pages/my_page.dart';
import 'package:flutter_trip/pages/search_page.dart';
import 'package:flutter_trip/pages/travel_page.dart';

/// 底部导航栏组件
/// 实现页面切换和底部导航功能
class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

/// 底部导航栏状态管理类
class _TabNavigatorState extends State<TabNavigator> {
  int _currentIndex = 0; // 当前选中的页面索引
  final PageController _pageController = PageController(); // 页面控制器

  @override
  void dispose() {
    // 释放页面控制器资源
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面主体部分，使用PageView实现滑动切换
      body: PageView(
        controller: _pageController,
        // 页面切换回调
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index; // 更新当前选中索引
          });
        },
        // 页面列表
        children: [
          HomePage(),    // 首页
          TravelPage(),  // 旅拍页
          SearchPage(),  // 搜索页
          MyPage(),      // 我的页面
        ],
      ),
      // 底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 当前选中索引
        // 点击导航项回调
        onTap: (index) {
          _pageController.jumpToPage(index); // 跳转到对应页面
        },
        selectedItemColor: Colors.blue,    // 选中项颜色
        unselectedItemColor: Colors.grey,   // 未选中项颜色
        type: BottomNavigationBarType.fixed, // 固定样式确保颜色生效
        // 导航项列表
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.travel_explore), label: '旅拍'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}